<template>
  <div>
    <n-modal v-model:show="showModelB" transform-origin="center" :close-on-esc="handleClose" :mask-closable="true"
      @mask-click="maskClicks">
      <n-card style="width: auto;position: fixed; right: 400px; bottom: 10px" title="项目详情" :bordered="false" size="huge"
        role="dialog" aria-modal="true" closable @close="closePopup">
        <div class="cardStyle">
          <div class="cardStyle_left">
            <div class="cardStyle_font">项目名称：莲都区紫金街道开潭村大岙建设用地复垦项目</div>
            <div class="cardStyle_font">项目总面积：100亩</div>
            <div class="cardStyle_font">工程预算：超过10W/亩</div>
            <div class="cardStyle_font">立项批复文件：</div>
            <div class="cardStyle_img">
              <img src="../../../../assets/lingshui/u287.svg" alt="">
              <img src="../../../../assets/lingshui/u287.svg" alt="">
            </div>
          </div>
          <div class="cardStyle_rigth">
            <div class="cardStyle_font">项目类型：旱改水</div>
            <div class="cardStyle_font">项目规划新增耕地面积：10亩</div>
            <div class="cardStyle_font">当前所属阶段：立项</div>
            <div class="cardStyle_font">预算审核报告：</div>
            <div class="cardStyle_img">
              <img src="../../../../assets/lingshui/u289.svg" alt="">
              <img src="../../../../assets/lingshui/u289.svg" alt="">
            </div>
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useMainStore } from "../../../../store/index"
const store = useMainStore()

const showModelB = ref(false)
const handleClose = ref(false)

// 关闭弹窗
const closePopup = () => {
  showModelB.value = false
  store.showModelB = false
}

// 遮罩层关闭
const maskClicks = () => {
  showModelB.value = false
  store.showModelB = false
}

watch(() => store.showModelB, (newValue) => {
  showModelB.value = newValue
}, { immediate: true })
</script>


<style lang="scss" scoped>
.cardStyle {
  width: 1000px;
  height: 300px;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  user-select: none;

  .cardStyle_left {
    width: 500px;

    .cardStyle_font {
      font-size: 16px;
      color: white;
      margin-bottom: 10px;
    }

    .cardStyle_img {
      display: flex;
      justify-content: space-around;
    }
  }

  .cardStyle_rigth {
    width: 400px;

    .cardStyle_font {
      font-size: 16px;
      color: white;
      margin-bottom: 10px;
    }

    .cardStyle_img {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>